<template>
    <l-page class="pb-3">
        <l-navbar title="设置"></l-navbar>
        <view class="flex flex-col items-center my-3">
            <button class="p-0 w-24 h-24 avatar-box flex items-center justify-center" open-type="chooseAvatar"
                @chooseavatar="onChooseAvatar">
                <image class="w-full h-full avatar " :src="login.userInfo.avatar_file"
                    v-if="login.userInfo.avatar_file">
                </image>
                <u-icon v-else name="camera" size="56"></u-icon>
            </button>
            <view class="mt-2">点击更换头像</view>
        </view>
        <view class="panel flex" @tap="nickNameModal = true">
            <view class="">
                昵称
            </view>
            <view class="ml-3 flex-1">
                {{ login.userInfo.nickname }}
            </view>
            <u-icon name="arrow-right"></u-icon>
        </view>

        <view class="flex flex-col items-center my-3">
            <button class="p-0 w-24 h-24 avatar-box flex items-center justify-center" @tap="setQrcode">
                <image class="w-full h-full avatar" :src="login.userInfo.wechat_qrcode"
                    v-if="login.userInfo.wechat_qrcode"></image>
                <u-icon v-else name="camera-fill" size="56"></u-icon>
            </button>
            <view class="mt-2">点击上传联系二维码</view>
        </view>
        <!-- <navigator url="/pages/setting/user-info" class="panel flex">
            <view class="flex-1">
                其他个人资料
            </view>
            <u-icon name="arrow-right"></u-icon>
        </navigator> -->
        <!-- <navigator url="/pages/setting/reset-password" class="panel flex">
            <view class="flex-1">
                重置密码
            </view>
            <u-icon name="arrow-right"></u-icon>
        </navigator> -->
    </l-page>
    <u-modal :show="nickNameModal" @cancel="nickNameModal = false" :title-style="{ color: 'red' }" title="修改昵称"
        @confirm="confirm" show-cancel-button>
        <l-input type="text" placeholder="请输入昵称" v-model="nickName"></l-input>
    </u-modal>
</template>
<script setup lang="ts">
import Login from '@/stores/login'
import { ref } from 'vue';
const login = Login(), nickName = ref(login.userInfo.nickname)
let nickNameModal = ref(false)
function onChooseAvatar(e: any) {
    const { avatarUrl } = e.detail
    login.updateUserInfo({ ...login.userInfo, avatar_file: avatarUrl })
}
function setQrcode() {
    uni.chooseMedia({
        count: 1,
        success: (res) => {
            login.updateUserInfo({ ...login.userInfo, wechat_qrcode: res.tempFiles[0].tempFilePath })
        }
    })
}
function confirm() {
    login.updateUserInfo({ ...login.userInfo, nickname: nickName.value }).then(res => {
        nickName.value = login.userInfo.nickname
        nickNameModal.value = false;
    })
}
</script>